<template>
  <!-- 退货 -->
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="退货单编号">
        <el-input size="small" v-model="formInline.returnId" clearable placeholder="退货单编号"></el-input>
      </el-form-item>
      <el-form-item label="退货发起人">
        <el-input size="small" v-model="formInline.userId.id" clearable placeholder="退货发起人"></el-input>
      </el-form-item>
      <el-form-item label="退货状态">
      <el-select  placeholder="退货状态" >
        <!-- 缺少值 -->
        <el-option value="0">已完成</el-option>
        <el-option  value="1">未完成</el-option>
      </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据列表 -->
    <el-table :data="hrData" stripe style="width: 100%">
      <el-table-column prop="returnId" label="退货单编号" >
      </el-table-column>
      <el-table-column prop="workNumber" label="发起人"  >
      </el-table-column>
      <el-table-column prop="inventoryBookkeepingId.returnReason" label="退货理由"  >
      </el-table-column>
      <el-table-column prop="activitiInstanceId" label="流程实例">
      </el-table-column>
      <el-table-column prop="inventoryBookkeepingId.id" label="库存台账ID"> 
      </el-table-column>
      <el-table-column label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <!-- <el-popconfirm title="确定删除吗？">
              <el-button slot="reference">删除</el-button>
              <el-button slot="reference" size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
          </el-popconfirm> -->
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    
    
    <el-pagination background layout="prev, pager, next"
               @current-change="getdata"
               @prev-click="getdata"
               @next-click="getdata"
               @size-change="getdata"
               :current-page.sync="pageparm.currPage"
               :page-size.sync="pageparm.pageSize"
               :total="pageparm.total">
    </el-pagination>



    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")' :append-to-body="true">
      <el-form label-width="80px" ref="editForm" :model="editForm" :rules="rules">
        <el-form-item label="员工姓名" prop="name">
          <el-input size="small" v-model="editForm.name" auto-complete="off" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="员工工号" prop="workNumber">
          <el-input size="small" v-model="editForm.workNumber" auto-complete="off" placeholder="请输入员工工号">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input size="small" v-model="editForm.phoneNumber" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="员工性别">
          <el-radio v-model="editForm.gender" value="男" label="男">男</el-radio>
          <el-radio v-model="editForm.gender" value="女" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="员工学历" prop="educationBackground">
          <el-input size="small" v-model="editForm.educationBackground" auto-complete="off"
                    placeholder="请输入员工学历"></el-input>
        </el-form-item>
        <el-form-item label="入职时间" prop="entryTime">
          <el-input size="small" v-model="editForm.entryTime" auto-complete="off" placeholder="请输入入职时间">
          </el-input>
        </el-form-item>
        <el-form-item label="员工年龄" prop="age">
          <el-input size="small" v-model="editForm.age" auto-complete="off" placeholder="请输入员工年龄"></el-input>
        </el-form-item>
        <!-- <el-form-item label="部门" prop="department">
            <el-input size="small" v-model="editForm.department" auto-complete="off" placeholder="请输入部门">
            </el-input>
        </el-form-item> -->
        <el-form-item label="部门">
          <el-select size="small" v-model="editForm.department" placeholder="请选择" class="userRole">
            <el-option label="生产部" value="1"></el-option>
            <el-option label="质量部" value="2"></el-option>
            <el-option label="研发部" value="3"></el-option>
            <el-option label="综合管理部" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工职位" prop="position">
          <el-input size="small" v-model="editForm.position" auto-complete="off" placeholder="请输入员工职位">
          </el-input>
        </el-form-item>
        <el-form-item label="员工状态" prop="position">
          <el-input size="small" v-model="editForm.state" auto-complete="off" placeholder="请输入员工状态">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm(editForm)">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
name: "returngoodspage",
  data() {
    return {
      IsAdd:true,
      total: 1,
      hrData: [],
      //搜索处的数据
      userSelect: [],
      loading: false, //是显示加载
      title: '添加员工',
      editFormVisible: false, //控制编辑页面显示与隐藏
      dataAccessshow: false, //控制数据权限显示与隐藏
      unitAccessshow: false, //控制所属单位隐藏与显示
      isAdmin: localStorage.getItem("isAdmin"),
      hr: {
        name: "",
        workNumber: "",
        phoneNumber: "",
        gender: "",
        educationBackground: "",
        entryTime: "",
        age: "",
        department: "",
        position: "",
        state: ""

      },
      pageparm: {
        currPage: 1,
        pageSize: 1,
        total: 0,
      },
      // 请求数据参数
      formInline: {
        returnId:"",
        userId:{id:""},
      },
      // 编辑与添加
      editForm: {
        name: "",
        workNumber: "",
        phoneNumber: "",
        gender: "",
        educationBackground: "",
        entryTime: "",
        age: "",
        department: "",
        position: "",
        state: ""
      },
    }
  },
  methods: {
    // 获取数据方法
    getdata() {
      this.loading = true
        this.$http.post("/procure/returnCargo/query", {
          "returnCargo":this.formInline,
          "currPage": this.pageparm.currPage,
          "pageSize": this.pageparm.pageSize
        }).then(r => {
          console.log(r)
          if (r.data.code == 200) {
              this.hrData = r.data.data.data,
             this.pageparm.total  = r.data.data.totalNums
          }
        })
        // this.hrData = res.data
        // // 分页赋值
        // this.pageparm.currentPage = this.formInline.page
        // this.pageparm.pageSize = this.formInline.limit
        // this.pageparm.total = res.count
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改员工'
        this.editForm.id = row.id
        this.editForm.name = row.name
        this.editForm.workNumber = row.workNumber
        this.editForm.phoneNumber = row.phoneNumber
        this.editForm.gender = row.gender
        this.editForm.educationBackground = row.educationBackground
        this.editForm.entryTime = row.entryTime
        this.editForm.age = row.age
        this.editForm.department = row.department
        this.editForm.state = row.state
      } else {
        this.title = '添加员工'
        this.editForm.name = ''
        this.editForm.workNumber = ''
        this.editForm.phoneNumber = ''
        this.editForm.gender = ''
        this.editForm.educationBackground = ''
        this.editForm.entryTime = ''
        this.editForm.age = ''
        this.editForm.department = ''
        this.editForm.state = ''
      }
    },
    //搜索事件
    search() {
      console.log(this.formInline)
      this.getdata(this.formInline)
    },
    // 编辑、添加提交方法
    submitForm(editForm) {
      if (editForm.id != null && editForm.id != 'undefined') {
        this.$http.post("/manpower/update", editForm).then(r => {
          console.log(r)
          if (r.data.code == 200) {
            alert("修改成功")
          } else {
            alert("修改失败")
          }
        })
      } else {
        this.$http.post("/manpower/add", editForm).then(r => {
          console.log(r)
          if (r.data.code == 200) {
            alert("添加成功")
          } else {
            alert("添加失败")
          }
        })
      }
    },
    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == 'edit') {
        this.editFormVisible = false
      } else if (dialog == 'perm') {
        this.dataAccessshow = false
      } else if (dialog == 'unit') {
        this.unitAccessshow = false
      }
    },
    // 删除员工
    deleteUser(index, row) {
      console.log(row);
      this.$http.post("/manpower/del/"+row.id).then(r => {
        console.log(r)
        if (r.data.code == 200) {
          alert("删除成功")
        } else {
          alert("删除失败")
        }
      })
    }

  },
  created: function () {
    this.getdata();
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}
</style>